<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="建设项目" prop="projectId">
        <el-select
          v-model="queryParams.projectId"
          placeholder="请选择"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="item in searchProjectOptions"
            :key="item.projectId"
            :value="item.projectId"
            :label="item.projectName"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="机构名称" prop="institutionName">
        <el-input
          v-model="queryParams.institutionName"
          placeholder="请输入机构名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="机构类型" prop="institutionType">
        <el-select
          v-model="queryParams.institutionType"
          placeholder="请选择"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="dict in dict.type.pro_institution_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['project:institution:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['project:institution:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['project:institution:remove']"
        >删除</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="institutionList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="机构编码" align="center" prop="institutionCode" width="100" />
      <el-table-column label="机构名称" align="center" prop="institutionName" width="200"/>
      <el-table-column label="机构类型" align="center" prop="institutionType" width="80">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.pro_institution_type" :value="scope.row.institutionType"/>
        </template>
      </el-table-column>
      <el-table-column label="建设项目" align="center" prop="projectName" />
      <el-table-column label="单位" align="center" prop="companyName" width="200" show-overflow-tooltip />
      <el-table-column label="显示顺序" align="center" prop="orderNum" width="80" />
      <el-table-column label="有无分包" align="center" prop="isSubpackage" width="80">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.isSubpackage" v-if="scope.row.institutionType == 'B'"/>
        </template>
      </el-table-column>
      <el-table-column label="清单共享" align="center" prop="isShare" width="80">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.isShare" v-if="scope.row.institutionType == 'B'"/>
        </template>
      </el-table-column>
      <el-table-column label="所属标段" align="center" prop="parentName" width="200" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleBrowse(scope.row)"
          >查看</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-order"
            v-if="scope.row.institutionType == 'B' || scope.row.institutionType == 'F'"
            @click="handleDetail(scope.row)"
          >标段详情</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-order"
            v-if="scope.row.institutionType == 'D' || scope.row.institutionType == 'J' || scope.row.institutionType == 'Z' || scope.row.institutionType == 'A'"
            v-hasPermi="['project:institution:add']"
            @click="handleSupervisorDetail(scope.row)"
          >标段详情</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-user-solid"
            @click="handleAddUser(scope.row)"
            v-hasPermi="['project:institution:add']"
          >人员</el-button>

        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改机构对话框 -->
    <el-dialog :title="title" :visible.sync="open" :close-on-click-modal="false" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-descriptions class="margin-top" title="" :column="2" border>
        </el-descriptions>
        <el-row>
          <el-col :span="12">
            <el-form-item label="机构编码" prop="institutionCode">
              <el-input v-model="form.institutionCode" placeholder="请输入机构编码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机构名称" prop="institutionName">
              <el-input v-model="form.institutionName" placeholder="请输入机构名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="机构类型" prop="institutionType">
              <el-select v-model="form.institutionType" placeholder="请选择机构类型" style="width: 100%">
                <el-option
                  v-for="dict in dict.type.pro_institution_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="建设项目" prop="projectId">
              <el-select v-model="form.projectId" placeholder="请选择建设项目" style="width: 100%" @change="selectProjectOnChange">
                <el-option
                  v-for="item in projectOptions"
                  :key="item.projectId"
                  :label="item.projectName"
                  :value="item.projectId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="建设单位" prop="companyId">
              <el-select v-model="form.companyId" filterable placeholder="请选择建设单位" style="width: 100%">
                <el-option
                  v-for="item in companyOptions"
                  :key="item.companyId"
                  :label="item.companyName"
                  :value="item.companyId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示顺序" prop="orderNum">
              <el-input-number v-model="form.orderNum" controls-position="right" :min="0" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="有无分包" prop="isSubpackage" v-if="form.institutionType == 'B'">
              <el-radio-group v-model="form.isSubpackage">
                <el-radio label="Y">是</el-radio>
                <el-radio label="N">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="清单共享" prop="isShare" v-if="form.institutionType == 'B'">
              <el-radio-group v-model="form.isShare">
                <el-radio label="Y">是</el-radio>
                <el-radio label="N">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属标段" prop="parentCode" v-if="form.institutionType == 'F'">
              <el-select v-model="form.parentCode" placeholder="请选择所属标段" style="width: 100%">
                <el-option
                  v-for="item in bidOptions"
                  :key="item.innerCode"
                  :label="item.institutionName"
                  :value="item.innerCode">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计量用户" prop="meterageUser" v-if="'D,J,Z,A'.indexOf(form.institutionType) != -1">
              <el-select v-model="form.meterageUser" placeholder="请选择用户" style="width: 100%">
                <el-option
                  v-for="item in userOptions"
                  :key="item.userName"
                  :label="item.nickName"
                  :value="item.userName">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否统计" prop="isCount" v-if="'F,B'.indexOf(form.institutionType) != -1">
              <el-switch
                v-model="form.isCount"
                active-value="Y"
                inactive-value="N">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="驻地" prop="zdCode" v-if="'F,B'.indexOf(form.institutionType) != -1">
              <el-select v-model="form.zdCode" placeholder="请选择驻地" style="width: 100%">
                <el-option
                  v-for="item in zdBidOptions"
                  :key="item.innerCode"
                  :label="item.institutionName"
                  :value="item.innerCode">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="监理" prop="jlCode" v-if="'F,B,D'.indexOf(form.institutionType) != -1">
              <el-select v-model="form.jlCode" placeholder="请选择监理" style="width: 100%">
                <el-option
                  v-for="item in jlBidOptions"
                  :key="item.innerCode"
                  :label="item.institutionName"
                  :value="item.innerCode">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="总监" prop="zjCode" v-if="'F,B,D,J'.indexOf(form.institutionType) != -1">
              <el-select v-model="form.zjCode" placeholder="请选择总监" style="width: 100%">
                <el-option
                  v-for="item in zjBidOptions"
                  :key="item.innerCode"
                  :label="item.institutionName"
                  :value="item.innerCode">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="代建" prop="djCode" v-if="'F,B,D,J,Z'.indexOf(form.institutionType) != -1">
              <el-select v-model="form.djCode" placeholder="请选择代建" style="width: 100%">
                <el-option
                  v-for="item in djBidOptions"
                  :key="item.innerCode"
                  :label="item.institutionName"
                  :value="item.innerCode">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="业主" prop="yzCode" v-if="'F,B,D,J,Z,A'.indexOf(form.institutionType) != -1">
              <el-select v-model="form.yzCode" placeholder="请选择业主" style="width: 100%">
                <el-option
                  v-for="item in yzBidOptions"
                  :key="item.innerCode"
                  :label="item.institutionName"
                  :value="item.innerCode">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="报表编号" prop="reportCode">
              <el-input v-model="form.reportCode" placeholder="请输入报表编码" />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 查看机构对话框 -->
    <el-dialog :title="browseTitle" :visible.sync="browseOpen" :close-on-click-modal="false" width="1000px" append-to-body>
      <el-tabs v-model="activeName" type="card">

        <el-tab-pane label="基本信息" name="basic">
          <el-form ref="form" :model="form" label-width="80px">
            <el-descriptions class="margin-top" title="" :column="2" border>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                <template slot="label">
                  机构编码
                </template>
                {{form.institutionCode}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                <template slot="label">
                  机构名称
                </template>
                {{form.institutionName}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                <template slot="label">
                  机构类型
                </template>
                <dict-tag :options="dict.type.pro_institution_type" :value="form.institutionType"/>
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                <template slot="label">
                  建设项目
                </template>
                {{form.projectName}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                <template slot="label">
                  建设单位
                </template>
                {{form.companyName}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                <template slot="label">
                  显示顺序
                </template>
                {{form.orderNum}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle' v-if="form.institutionType == 'B'">
                <template slot="label">
                  有无分包
                </template>
                <el-radio-group v-model="form.isSubpackage">
                  <el-radio label="Y">是</el-radio>
                  <el-radio label="N">否</el-radio>
                </el-radio-group>
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle' v-if="form.institutionType == 'B'">
                <template slot="label">
                  清单共享
                </template>
                <el-radio-group v-model="form.isShare">
                  <el-radio label="Y">是</el-radio>
                  <el-radio label="N">否</el-radio>
                </el-radio-group>
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle' v-if="form.institutionType == 'F'">
                <template slot="label">
                  所属标段
                </template>
                {{form.parentName}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle' v-if="form.institutionType == 'F'">
                <template slot="label">
                  标段单位
                </template>
                {{form.bdName}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle' v-if="'F,B'.indexOf(form.institutionType) != -1">
                <template slot="label">
                  驻地机构
                </template>
                {{form.zd}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle' v-if="'F,B'.indexOf(form.institutionType) != -1">
                <template slot="label">
                  驻地单位
                </template>
                {{form.zdName}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle' v-if="'F,B,D'.indexOf(form.institutionType) != -1">
                <template slot="label">
                  监理机构
                </template>
                {{form.jl}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle' v-if="'F,B,D'.indexOf(form.institutionType) != -1">
                <template slot="label">
                  监理单位
                </template>
                {{form.jlName}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle' v-if="'F,B,D,J'.indexOf(form.institutionType) != -1">
                <template slot="label">
                  总监机构
                </template>
                {{form.zj}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle' v-if="'F,B,D,J'.indexOf(form.institutionType) != -1">
                <template slot="label">
                  总监单位
                </template>
                {{form.zjName}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle' v-if="'F,B,D,J,Z'.indexOf(form.institutionType) != -1">
                <template slot="label">
                  代建机构
                </template>
                {{form.dj}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle' v-if="'F,B,D,J,Z'.indexOf(form.institutionType) != -1">
                <template slot="label">
                  代建单位
                </template>
                {{form.djName}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle' v-if="'F,B,D,J,Z,A'.indexOf(form.institutionType) != -1">
                <template slot="label">
                  业主机构
                </template>
                {{form.yz}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle' v-if="'F,B,D,J,Z,A'.indexOf(form.institutionType) != -1">
                <template slot="label">
                  业主单位
                </template>
                {{form.yzName}}
              </el-descriptions-item>
            </el-descriptions>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="详细信息" name="detail1" v-if="'B,F'.indexOf(form.institutionType) != -1">
          <el-form ref="formDetail" :model="detailForm" label-width="80px">
            <el-divider content-position="left">工程状况</el-divider>
            <el-descriptions class="margin-top" title="" :column="3" border>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  标段名称
                </template>
                {{detailForm.institutionName}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  是否自然月
                </template>
                <el-switch
                  v-model="detailForm.isNaturalMonth"
                  active-value="Y"
                  inactive-value="N" disabled>
                </el-switch>
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  业务上报日
                </template>
                {{detailForm.businessReportingDate}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  起始桩号
                </template>
                {{detailForm.beginStation}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  终止桩号
                </template>
                {{detailForm.endStation}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  标段长度
                </template>
                {{detailForm.bidLength}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  开始日期
                </template>
                {{detailForm.beginDate}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  截止日期
                </template>
                {{detailForm.endDate}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  保留小数位1
                </template>
                {{detailForm.decimalPlace1}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  保留小数位2
                </template>
                {{detailForm.decimalPlace2}}
              </el-descriptions-item>
            </el-descriptions>
            <el-divider content-position="left">合同支付条款</el-divider>
            <el-descriptions class="margin-top" title="" :column="3" border>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  中标总价
                </template>
                {{detailForm.successfulBidTotal}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  合同总价
                </template>
                {{detailForm.contractTotal}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  清单总价
                </template>
                {{detailForm.boqTotal}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  暂定金金额
                </template>
                {{detailForm.provisionalDepositTotal}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  计日工金额
                </template>
                {{detailForm.dayLaborTotal}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  其他金额
                </template>
                {{detailForm.otherTotal}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  变更金额
                </template>
                {{detailForm.changeTotal}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  不可预见费
                </template>
                {{detailForm.unforeseenTotal}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  超计量
                </template>
                <el-switch
                  v-model="detailForm.ultraMeasure"
                  active-value="Y"
                  inactive-value="N" disabled>
                </el-switch>
              </el-descriptions-item>
            </el-descriptions>
            <el-divider content-position="left">支付项目条款</el-divider>
            <el-descriptions class="margin-top" title="" :column="2" border>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  动员预付款起扣比例
                </template>
                {{detailForm.advancePaymentBegin}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  动员预付款止扣比例
                </template>
                {{detailForm.advancePaymentEnd}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  保留金扣款比例
                </template>
                {{detailForm.retentionMoneyDeduction}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  保留金限额比例
                </template>
                {{detailForm.retentionMoneyQuota}}
              </el-descriptions-item>
            </el-descriptions>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="详细信息" name="detail2" v-if="'D,J,Z,A'.indexOf(form.institutionType) != -1">
          <el-form ref="formSupervisorDetail" :model="detailForm" label-width="80px">
            <el-divider content-position="left">工程状况</el-divider>
            <el-descriptions class="margin-top" title="" :column="3" border>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  标段名称
                </template>
                {{detailForm.institutionName}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  是否自然月
                </template>
                <el-switch
                  v-model="detailForm.isNaturalMonth"
                  active-value="Y"
                  inactive-value="N" disabled>
                </el-switch>
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  业务上报日
                </template>
                {{detailForm.businessReportingDate}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  开始日期
                </template>
                {{detailForm.beginDate}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  截止日期
                </template>
                {{detailForm.endDate}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  保留小数位2
                </template>
                {{detailForm.decimalPlace2}}
              </el-descriptions-item>
            </el-descriptions>
            <el-divider content-position="left">合同支付条款</el-divider>
            <el-descriptions class="margin-top" title="" :column="3" border>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  中标总价
                </template>
                {{detailForm.successfulBidTotal}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  合同总价
                </template>
                {{detailForm.contractTotal}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  暂定金金额
                </template>
                {{detailForm.provisionalDepositTotal}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  施工期金额
                </template>
                {{detailForm.constructionPeriodTotal}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  缺陷期金额
                </template>
                {{detailForm.defectPeriodTotal}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  冬休期金额
                </template>
                {{detailForm.winterPeriodTotal}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  计日工金额
                </template>
                {{detailForm.dayLaborTotal}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  不可预见费
                </template>
                {{detailForm.unforeseenTotal}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  利润
                </template>
                {{detailForm.profitTotal}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  变更金额
                </template>
                {{detailForm.changeTotal}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  代理费
                </template>
                {{detailForm.agentTotal}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  超计量
                </template>
                <el-switch
                  v-model="detailForm.ultraMeasure"
                  active-value="Y"
                  inactive-value="N" disabled>
                </el-switch>
              </el-descriptions-item>
            </el-descriptions>
            <el-divider content-position="left">支付项目条款</el-divider>
            <el-descriptions class="margin-top" title="" :column="2" border>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  动员预付款起扣比例
                </template>
                {{detailForm.advancePaymentBegin}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  动员预付款止扣比例
                </template>
                {{detailForm.advancePaymentEnd}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  保留金扣款比例
                </template>
                {{detailForm.retentionMoneyDeduction}}
              </el-descriptions-item>
              <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle1'>
                <template slot="label">
                  保留金限额比例
                </template>
                {{detailForm.retentionMoneyQuota}}
              </el-descriptions-item>
            </el-descriptions>
          </el-form>
        </el-tab-pane>

      </el-tabs>


      <div slot="footer" class="dialog-footer">
        <el-button @click="browseCancel">关　　闭</el-button>
      </div>
    </el-dialog>

    <!-- 人员分配 -->
    <el-dialog :title="transferTitle" :visible.sync="userOpen" width="900px" append-to-body>
      <el-row>
        <el-select v-model="transferProjectId" placeholder="建设项目" style="width: 300px;" @change="handleTransferProjectOnChange">
          <el-option
            v-for="item in searchProjectOptions"
            :key="item.projectId"
            :label="item.projectName"
            :value="item.projectId">
          </el-option>
        </el-select>
      </el-row>
      <el-transfer style="padding-top: 10px;"
                   :titles="['未分配', '已分配']"
                   v-model="transferValue"
                   :data="transferData"
                   :props="{key: 'user', label: 'name'}">
      </el-transfer>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSaveUser">确 定</el-button>
        <el-button @click="cancelAddUser">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 标段详情 -->
    <el-dialog :title="detail.title" :visible.sync="detail.open" :close-on-click-modal="false" width="900px" append-to-body class="scrollbar">
      <el-form ref="formDetail" :model="detailForm" :rules="detailRules" label-width="100px" size="mini">
        <el-divider content-position="left">工程状况</el-divider>

        <el-row>
          <el-col :span="8">
            <el-form-item label="标段名称" prop="institutionName">
              <el-input v-model="detailForm.institutionName" placeholder="标段名称" maxlength="30" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否自然月" prop="isNaturalMonth">
              <el-switch
                v-model="detailForm.isNaturalMonth"
                active-value="Y"
                inactive-value="N" @change="isNaturalMonthOnChange">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业务上报日" prop="businessReportingDate">
              <el-input-number v-model="detailForm.businessReportingDate" :disabled="this.detailForm.disabledFlag" :step="1" :min="1" :max="28" placeholder="业务上报日" style="width: 100%"/>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="起始桩号" prop="beginStation">
              <el-input v-model="detailForm.beginStation" placeholder="请输入起始桩号" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="终止桩号" prop="endStation">
              <el-input v-model="detailForm.endStation" placeholder="请输入终止桩号" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="标段长度" prop="bidLength">
              <el-input-number v-model="detailForm.bidLength" placeholder="请输入标段长度" :controls="false" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="开始日期" prop="beginDate">
              <el-date-picker
                v-model="detailForm.beginDate"
                align="right"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期" style="width: 100%"
                :picker-options="beginDatePickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="截止日期" prop="endDate">
              <el-date-picker
                v-model="detailForm.endDate"
                align="right"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"  style="width: 100%"
                :picker-options="endDatePickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col  :span="8">
            <el-form-item prop="decimalPlace1">
              <span slot="label">
                <el-tooltip content="工程量清单保留小数位" placement="top">
                <i class="el-icon-question"></i>
                </el-tooltip>
                小数位1
              </span>
              <el-select v-model="detailForm.decimalPlace1" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in detail.decimalPlaceOptions"
                  :key="item.key"
                  :label="item.key"
                  :value="item.key">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col  :span="8">
            <el-form-item prop="decimalPlace2">
              <span slot="label">
                <el-tooltip content="计量清单保留小数位" placement="top">
                <i class="el-icon-question"></i>
                </el-tooltip>
                小数位2
              </span>
              <el-select v-model="detailForm.decimalPlace2" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in detail.decimalPlaceOptions"
                  :key="item.key"
                  :label="item.key"
                  :value="item.key">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">合同支付条款</el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item label="中标总价" prop="successfulBidTotal">
              <el-input-number v-model="detailForm.successfulBidTotal" placeholder="请输入中标总价" :min="0" :controls="false" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合同总价" prop="contractTotal">
              <el-input-number v-model="detailForm.contractTotal" placeholder="请输入合同总价" :min="0" :controls="false" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="清单总价" prop="boqTotal">
              <el-input-number v-model="detailForm.boqTotal" placeholder="请输入清单总价" :min="0" :controls="false" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="暂定金金额" prop="provisionalDepositTotal">
              <el-input-number v-model="detailForm.provisionalDepositTotal" placeholder="请输入暂定金金额" :min="0" :controls="false" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计日工金额" prop="dayLaborTotal">
              <el-input-number v-model="detailForm.dayLaborTotal" placeholder="请输入计日工金额" :min="0" :controls="false" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="其他金额" prop="otherTotal">
              <el-input-number v-model="detailForm.otherTotal" placeholder="请输入其他金额" :min="0" :controls="false" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="变更金额" prop="changeTotal">
              <el-input-number v-model="detailForm.changeTotal" placeholder="请输入变更金额" :min="0" :controls="false" style="width: 100%" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="不可预见费" prop="unforeseenTotal">
              <el-input-number v-model="detailForm.unforeseenTotal" placeholder="请输入不可预见费" :min="0" :controls="false" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="超计量" prop="ultraMeasure">
              <el-switch
                v-model="detailForm.ultraMeasure"
                active-value="Y"
                inactive-value="N">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">支付项目条款</el-divider>

        <el-row>
          <el-col :span="12">
            <el-form-item label="动员预付款起扣比例" prop="advancePaymentBegin" label-width="35%">
              <el-input-number v-model="detailForm.advancePaymentBegin" placeholder="动员预付款起扣比例" :step="10" :min="0" :max="100" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="动员预付款止扣比例" prop="advancePaymentEnd"  label-width="35%">
              <el-input-number v-model="detailForm.advancePaymentEnd" placeholder="动员预付款止扣比例" :step="10" :min="0" :max="100" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="保留金扣款比例" prop="retentionMoneyDeduction" label-width="35%">
              <el-input-number v-model="detailForm.retentionMoneyDeduction" placeholder="保留金扣款比例" :step="10" :min="0" :max="100" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保留金限额比例" prop="retentionMoneyQuota"  label-width="35%">
              <el-input-number v-model="detailForm.retentionMoneyQuota" placeholder="保留金限额比例" :step="10" :min="0" :max="100" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-hasPermi="['project:institution:edit']" @click="submitFormDetail">确 定</el-button>
        <el-button @click="cancelDetail">取 消</el-button>
      </div>

    </el-dialog>

    <!-- 监理标段详情 -->
    <el-dialog :title="detail.supervisorTitle" :visible.sync="detail.supervisorOpen" :close-on-click-modal="false" width="900px" append-to-body class="scrollbar">
      <el-form ref="formSupervisorDetail" :model="detailForm" :rules="detailSupervisorRules" label-width="100px" size="mini">
        <el-divider content-position="left">工程状况</el-divider>

        <el-row>
          <el-col :span="8">
            <el-form-item label="标段名称" prop="institutionName">
              <el-input v-model="detailForm.institutionName" placeholder="标段名称" maxlength="30" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否自然月" prop="isNaturalMonth">
              <el-switch
                v-model="detailForm.isNaturalMonth"
                active-value="Y"
                inactive-value="N" @change="isNaturalMonthOnChange">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业务上报日" prop="businessReportingDate">
              <el-input-number v-model="detailForm.businessReportingDate" :disabled="this.detailForm.disabledFlag" :step="1" :min="1" :max="28" placeholder="业务上报日" style="width: 100%"/>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="开始日期" prop="beginDate">
              <el-date-picker
                v-model="detailForm.beginDate"
                align="right"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期" style="width: 100%"
                :picker-options="beginDatePickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="截止日期" prop="endDate">
              <el-date-picker
                v-model="detailForm.endDate"
                align="right"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"  style="width: 100%"
                :picker-options="endDatePickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col  :span="8">
            <el-form-item label="保留小数位2" prop="decimalPlace2">
              <el-select v-model="detailForm.decimalPlace2" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in detail.decimalPlaceOptions"
                  :key="item.key"
                  :label="item.key"
                  :value="item.key">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">合同支付条款</el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item label="中标总价" prop="successfulBidTotal">
              <el-input-number v-model="detailForm.successfulBidTotal" placeholder="请输入中标总价" :min="0" :controls="false" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合同总价" prop="contractTotal">
              <el-input-number v-model="detailForm.contractTotal" placeholder="请输入合同总价" :min="0" :controls="false" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="暂定金金额" prop="provisionalDepositTotal">
              <el-input-number v-model="detailForm.provisionalDepositTotal" placeholder="请输入暂定金金额" :min="0" :controls="false" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="施工期金额" prop="constructionPeriodTotal">
              <el-input-number v-model="detailForm.constructionPeriodTotal" placeholder="请输入施工期金额" :min="0" :controls="false" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="缺陷期金额" prop="defectPeriodTotal">
              <el-input-number v-model="detailForm.defectPeriodTotal" placeholder="请输入缺陷期金额" :min="0" :controls="false" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="冬休期金额" prop="winterPeriodTotal">
              <el-input-number v-model="detailForm.winterPeriodTotal" placeholder="请输入冬休期金额" :min="0" :controls="false" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>

          <el-col :span="8">
            <el-form-item label="计日工金额" prop="dayLaborTotal">
              <el-input-number v-model="detailForm.dayLaborTotal" placeholder="请输入计日工金额" :min="0" :controls="false" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="不可预见费" prop="unforeseenTotal">
              <el-input-number v-model="detailForm.unforeseenTotal" placeholder="请输入不可预见费" :min="0" :controls="false" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="利润" prop="profitTotal">
              <el-input-number v-model="detailForm.profitTotal" placeholder="请输入利润金额" :min="0" :controls="false" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="变更金额" prop="changeTotal">
              <el-input-number v-model="detailForm.changeTotal" placeholder="请输入变更金额" :min="0" :controls="false" style="width: 100%" :disabled="true" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="代理费" prop="agentTotal">
              <el-input-number v-model="detailForm.agentTotal" placeholder="请输入代理费" :min="0" :controls="false" style="width: 100%" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="超计量" prop="ultraMeasure">
              <el-switch
                v-model="detailForm.ultraMeasure"
                active-value="Y"
                inactive-value="N">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">支付项目条款</el-divider>

        <el-row>
          <el-col :span="12">
            <el-form-item label="动员预付款起扣比例" prop="advancePaymentBegin" label-width="35%">
              <el-input-number v-model="detailForm.advancePaymentBegin" placeholder="动员预付款起扣比例" :step="10" :min="0" :max="100" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="动员预付款止扣比例" prop="advancePaymentEnd"  label-width="35%">
              <el-input-number v-model="detailForm.advancePaymentEnd" placeholder="动员预付款止扣比例" :step="10" :min="0" :max="100" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="保留金扣款比例" prop="retentionMoneyDeduction" label-width="35%">
              <el-input-number v-model="detailForm.retentionMoneyDeduction" placeholder="保留金扣款比例" :step="10" :min="0" :max="100" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保留金限额比例" prop="retentionMoneyQuota"  label-width="35%">
              <el-input-number v-model="detailForm.retentionMoneyQuota" placeholder="保留金限额比例" :step="10" :min="0" :max="100" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-hasPermi="['project:institution:edit']" @click="submitFormSupervisorDetail">确 定</el-button>
        <el-button @click="cancelSupervisorDetail">取 消</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
  import {
    listInstitution,
    getInstitution,
    getBrowse,
    delInstitution,
    addInstitution,
    updateInstitution,
    exportInstitution,
    dropDownBidByProjectId,
    getInstitutionUserList,
    saveInstitutionUser,
    getInstitutionDetail,
    updateInstitutionDetail
  } from "@/api/project/institution";
  import { selectProjectList } from "@/api/project/project";
  import { getProjectUserList } from "@/api/system/user";

export default {
  name: "Institution",
  dicts: ['pro_institution_type', 'sys_yes_no'],
  data() {
    return {
      // 遮罩层
      loading: false,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 机构表格数据
      institutionList: [],
      // 弹出层标题
      title: "",
      browseTitle: "",
      activeName: "basic",
      //label样式
      labelStyle: { 'width': '50px' },
      labelStyle1: { 'width': '90px' },
      labelStyle2: { 'width': '110px' },
      contentStyle: {
        'width': '200px'
      },
      // 是否显示弹出层
      open: false,
      browseOpen: false,
      // 是否显示弹出层
      userOpen: false,
      // 分配用户
      transferData: [],
      // 选中值
      transferValue: [],
      // 机构内码
      innerCode: null,
      // 分配用户标题
      transferTitle: "",
      transferProjectId: undefined,
      // 详情
      detail: {
        // 保留小数位
        decimalPlaceOptions: [{ key: 0 }, { key: 1 }, { key: 2 }, { key: 3 }, { key: 4 }, { key: 5 }, { key: 6}],
        // 是否显示弹出层
        open: false,
        supervisorOpen: false,
        // 弹出层标题
        title: "",
        supervisorTitle: "",
        // 是否禁用
        disabledFlag: false
      },
      // 开始 截止 时间范围控制
      beginDatePickerOptions: {
        disabledDate: (time) => {
          // if (this.detailForm.endDate != '' && this.detailForm.endDate != null) {
          //   return time.getTime() > this.detailForm.endDate;
          // }
          if (this.detailForm.endDate) {
            return time.getTime() > new Date(this.detailForm.endDate).getTime();
          }
        }
      },
      endDatePickerOptions: {
        disabledDate: (time) => {
          if (this.detailForm.beginDate) {
            return new Date(this.detailForm.beginDate).getTime() > time.getTime();
          }
        }
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectId: undefined,
        institutionName: undefined,
        institutionType: undefined,
      },
      // 查询条件 建设项目选项
      searchProjectOptions: [],
      // 建设项目选项
      projectOptions: [],
      // 单位选项
      companyOptions: [],
      // 标段,驻地,监理,总监,业主选项
      userOptions: [],
      bidOptions: [],
      zdBidOptions: [],
      jlBidOptions:[],
      zjBidOptions:[],
      djBidOptions:[],
      yzBidOptions:[],
      // 表单参数
      form: {},
      // 标段详情表单参数
      detailForm: {},
      // 表单校验
      rules: {
        institutionCode: [
          {pattern: /^[A-Za-z0-9]+$/, message: "机构编码格式不正确", trigger: "blur"},
          { required: true, message: "机构编码不能为空", trigger: "blur" }
        ],
        institutionName: [
          { required: true, message: "机构名称不能为空", trigger: "blur" }
        ],
        institutionType: [
          { required: true, message: "机构类型不能为空", trigger: "change" }
        ],
        projectId: [
          { required: true, message: "建设项目不能为空", trigger: "blur" }
        ],
        companyId: [
          { required: true, message: "单位不能为空", trigger: "blur" }
        ],
        parentCode: [
          { required: true, message: "所属标段不能为空", trigger: "blur" }
        ]
      },
      detailRules: {
        beginStation: [
          {pattern: /^K[0-9]+/, message: "起始桩号格式不正确", trigger: "blur"},
          { required: true, message: "起始桩号不能为空", trigger: "blur" }
        ],
        endStation: [
          {pattern: /^K[0-9]+/, message: "终止桩号格式不正确", trigger: "blur"},
          { required: true, message: "终止桩号不能为空", trigger: "blur" }
        ],
        beginDate: [
          { required: true, message: "开始日期不能为空", trigger: "blur" }
        ],
        endDate: [
          { required: true, message: "截止日期不能为空", trigger: "blur" }
        ]
      },
      detailSupervisorRules: {
        beginDate: [
          { required: true, message: "开始日期不能为空", trigger: "blur" }
        ],
        endDate: [
          { required: true, message: "截止日期不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getList();
    this.getProjectList();
  },
  methods: {
    /** 建设项目下拉 */
    getProjectList() {
      selectProjectList().then(response => {
        this.searchProjectOptions = response.projects;
      })
    },
    /** 查询建设项目下的用户 **/
    getProjectUserList() {
      getProjectUserList(this.form.projectId).then(response => {
        this.userOptions = response.data;
      });
    },
    /** 建设项目下拉事件 */
    selectProjectOnChange(val) {
      dropDownBidByProjectId(val).then(response => {
        this.bidOptions = response.bid;
        this.zdBidOptions = response.zdBid;
        this.jlBidOptions = response.jlBid;
        this.zjBidOptions = response.zjBid;
        this.djBidOptions = response.djBid;
        this.yzBidOptions = response.yzBid;
      });
      this.getProjectUserList();
    },
    /** 查询机构列表 */
    getList() {
      this.loading = true;
      listInstitution(this.queryParams).then(response => {
        this.institutionList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    browseCancel() {
      this.browseOpen = false;
      this.reset();
    },
    // 标段详情取消按钮
    cancelDetail() {
      this.detail.open = false;
    },
    // 监理标段详情取消按钮
    cancelSupervisorDetail() {
      this.detail.supervisorOpen = false;
    },
    // 表单重置
    reset() {
      this.form = {
        institutionId: null,
        institutionCode: null,
        institutionName: null,
        institutionType: null,
        projectId: null,
        companyId: null,
        innerCode: null,
        orderNum: null,
        isSubpackage: 'N',
        isShare: 'N',
        parentCode: null,
        bdName: null,
        zdCode: null,
        zdName: null,
        jlCode: null,
        jlName: null,
        zjCode: null,
        zjName: null,
        djCode: null,
        djName: null,
        yzCode: null,
        yzName: null,
        meterageUser: null,
        reportCode: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        zd: null,
        jl: null,
        zj: null,
        dj: null,
        yz: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.institutionId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      getInstitution().then(response => {
        this.projectOptions = response.projects;
        this.companyOptions = response.companys;
        // this.userOptions = response.users;
        this.open = true;
        this.title = "添加机构";
      });
    },
    /** 分配人员 */
    handleAddUser(row) {
      this.innerCode = null;
      this.transferData = [];
      this.transferValue = [];
      this.transferAllData = [];
      this.innerCode = row.innerCode;
      this.transferProjectId = row.projectId;
      getInstitutionUserList({ innerCode: row.innerCode }).then(response => {
        // this.transferData = response.users;
        this.transferAllData = response.users;
        this.transferValue = response.checkedUsers;
        this.transferUser();
        this.userOpen = true;
        this.transferTitle = row.institutionName + "分配用户";
      })
    },
    // 项目发生改变，穿梭器数据绑定
    handleTransferProjectOnChange() {
      this.transferUser();
    },
    transferUser() {
      let leftUser = [];
      this.transferAllData.forEach(item => {
        let flag = false;
        if (item.projectId == this.transferProjectId) {
          leftUser.push(item);
          flag = true;
        }
        if (this.transferValue) {
          this.transferValue.forEach(code => {
            if (item.user == code && !flag) {
              leftUser.push(item);
            }
          });
        }
      });
      this.transferData = leftUser;
    },
    /** 分配人员保存 */
    handleSaveUser() {
      let users = '';
      this.transferValue.forEach((item) => {
        users += item + ',';
      })
      users = users.substring(0, users.length - 1);
      saveInstitutionUser({ innerCode: this.innerCode, users: users}).then(response => {
        this.$modal.msgSuccess("分配成功");
        // this.innerCode = null;
        // this.transferData = [];
        // this.transferValue = [];
        this.userOpen = false;
      })
    },
    /** 取消分配人员 */
    cancelAddUser() {
      // this.innerCode = null;
      // this.transferData = [];
      // this.transferValue = [];
      this.userOpen = false;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const institutionId = row.institutionId || this.ids
      getInstitution(institutionId).then(response => {
        this.form = response.data;
        this.projectOptions = response.projects;
        this.companyOptions = response.companys;
        this.bidOptions = response.bid;
        this.zdBidOptions = response.zdBid;
        this.jlBidOptions = response.jlBid;
        this.zjBidOptions = response.zjBid;
        this.djBidOptions = response.djBid;
        this.yzBidOptions = response.yzBid;
        this.open = true;
        this.title = "修改机构";
        this.getProjectUserList();
      });
    },
    /** 查看按钮操作 */
    handleBrowse(row) {
      this.activeName = "basic";
      this.reset();
      const institutionId = row.institutionId || this.ids
      getBrowse(institutionId).then(response => {
        this.form = response.data;
        this.detailForm = response.detail;
        this.browseOpen = true;
        this.browseTitle = "查看机构";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.institutionId != null) {
            updateInstitution(this.form).then(response => {
              this.$modal.msgSuccess("操作成功");
              this.open = false;
              this.getList();
            });
          } else {
            addInstitution(this.form).then(response => {
              this.$modal.msgSuccess("操作成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 标段详情提交按钮 */
    submitFormDetail() {
      this.$refs["formDetail"].validate(valid => {
        if (valid) {
          updateInstitutionDetail(this.detailForm).then(response => {
            // this.detail.open = false;
            this.$modal.msgSuccess("操作成功");
          });
        }
      });
    },
    /** 监理标段详情提交按钮 */
    submitFormSupervisorDetail() {
      this.$refs["formSupervisorDetail"].validate(valid => {
        if (valid) {
          updateInstitutionDetail(this.detailForm).then(response => {
            this.$modal.msgSuccess("操作成功");
          });
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const institutionIds = row.institutionId || this.ids;
      this.$modal.confirm('确认删除选中的数据项？').then(function() {
        return delInstitution(institutionIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("操作成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$modal.confirm('确认导出所有机构数据项？').then(() => {
        this.exportLoading = true;
        return exportInstitution(queryParams);
      }).then(response => {
        this.$download.name(response.msg);
        this.exportLoading = false;
      }).catch(() => {});
    },
    /** 标段详情按钮操作 */
    handleDetail(row) {
      const id = row.institutionId;
      getInstitutionDetail(id).then(response => {
        this.detailForm = response.data;
        this.detail.open = true;
        this.detail.title = "查看标段详情";
      });
    },
    /** 监理标段详情按钮操作 */
    handleSupervisorDetail(row) {
      const id = row.institutionId;
      getInstitutionDetail(id).then(response => {
        this.detailForm = response.data;
        this.detail.supervisorOpen = true;
        this.detail.supervisorTitle = "查看标段详情";
      });
    },
    /**
     * 自然月开关
     * @param val
     */
    isNaturalMonthOnChange(val) {
      if (val == 'Y') {
        this.detailForm.disabledFlag = true;
      } else {
        this.detailForm.disabledFlag = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
  .el-tabs--card {
    height: calc(60vh);
    /* overflow-y: auto; */
  }
  .el-tab-pane {
    height: calc(60vh);
    overflow-y: auto;
  }
  ::v-deep .el-transfer-panel{
    width: 300px; /* 左右两个穿梭框的高度和宽度 */
  }
</style>
